<template>
   <div class="wrapper">
      <van-grid :border="false" :column-num="4">
        <van-grid-item  text="蔬菜水果" to="/">
            <img src="./../../../../images/nav/menu_bg_01.png" slot="icon" width="50px" height="50px" />
        </van-grid-item >
        <van-grid-item text="肉类(鲜活)" to="/">
            <img src="./../../../../images/nav/menu_bg_02.png" slot="icon" width="50px" height="50px" />
        </van-grid-item>
        <van-grid-item text="熟食豆制" to="/">
            <img src="./../../../../images/nav/menu_bg_03.png" slot="icon" width="50px" height="50px" />
        </van-grid-item>
          <van-grid-item text="米面粮油" to="/">
           <img src="./../../../../images/nav/menu_bg_04.png" slot="icon" width="50px" height="50px" />
        </van-grid-item>
      </van-grid>
   </div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
     export default {
        name:"Nav",

        props:{
           nav_list:Array
        },


        data(){
          return{
                 
              
          }
       }
  }
</script>
<style  lang="less" scoped>
 .wrapper {
            padding-top: 0.9375rem;
            background: #FFF;
            padding-bottom: 0.9375rem;
        }

        .itemWrapper {
            display: inline-block;
            padding-top: 0.3125rem;
            width: 20%; }

        .imageWrapper {
            padding-bottom: 58.823%;
            height: 0;
            overflow: hidden;
            text-align: center; }

        .image {
            width: 58.823%;
            height: auto;
            display: inline-block; }

        .titleWrapper {
            padding: 0.4375rem 0.3125rem 0.375rem 0.3125rem; }

        .title {
            font-size: 0.70rem;
            color: #555555;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
</style>